/**
* 管理员管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dataStatistics' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" class="user-search" style="width:100%;height:40px;">
      <el-button
        style="float: right; margin-right: 20px;"
        @click="handleEdit(0)"
        type="success"
        size="small"
        icon="el-icon-plus"
      >新增</el-button>
    </el-form>

    <!--列表-->
    <Pagination
      mAction="backstage/admin/page"
      :mParams="mParams"
      :key="count"
       :border="true"
      @func="getMsgFormSon"
    >
      <template slot="item">
        <el-table-column align="center" width="150" prop="adminId" label="管理员ID"></el-table-column>

        <el-table-column align="center" prop="name" label="管理员名称"></el-table-column>
        <el-table-column align="center" prop="account" label="管理员账号"></el-table-column>
        <el-table-column align="center" prop="password" label="管理员密码"></el-table-column>
        <el-table-column align="center" label="操作" width="280">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(1,scope.row)"
            >修改</el-button>
            <!-- 权限配置 -->
            <el-button type="warning" size="small" @click="getRoleinfo(scope.row)">权限配置</el-button>

            <!-- 删除 -->
            <el-button type="danger" size="small" icon="el-icon-delete" @click="remove(scope.row.adminId)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Pagination>

    <!-- 管理员 -->
    <el-dialog
      :title="title!=1?'新增管理员':'修改管理员'"
      :visible.sync="editFormVisible"
      width="35%"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px" :key="editFormVisible" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="管理员名称" prop="name" style="width:90%">
          <el-input
            v-model.trim="editForm.name"
            auto-complete="off"
            maxlength="10"
            show-word-limit
            placeholder="请输入管理员名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员账号" prop="account" style="width:90%">
          <el-input
            v-model.trim="editForm.account"
            auto-complete="off"
            maxlength="20"
            show-word-limit
            placeholder="请输入管理员名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password" style="width:90%">
          <el-input
            v-model.trim="editForm.password"
            auto-complete="off"
            maxlength="18"
            show-word-limit
            placeholder="请输入管理员密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeDialog">取消</el-button>
          <el-button
            type="primary"
            :loading="logining"
            class="title"
            @click="submitForm('editForm')"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 管理员 -->
    <el-dialog
      title="权限配置"
      :visible.sync="accessConfiguration"
      width="40%"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px" :key="accessConfiguration" :model="Configuration" ref="Configuration">
        <el-form-item label="选择权限">
          <el-tree
            ref="tree"
            :data="dats"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :default-checked-keys="indexlist"
            @check-change="handleCheckChange"
          ></el-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeDialog">取消</el-button>
          <el-button
            type="primary"
            :loading="logining"
            class="title"
            @click="submitConfiguration"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name"
      },
      dataList: [], //显示数据
      count: 0,
      title: 0,
      editFormVisible: false,
      logining: false,
      editForm: {
        name: "", //管理员名称
        account: "", //管理员账号
        password: "", //管理员密码
        adminId:"",
      },
      accessConfiguration:false,
      indexlist: [], //存放选取或获取的页面权限

      rules: {
        name: [
          {
            required: true,
            message: "请输入管理员名称",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "请输入管理员账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入管理员密码",
            trigger: "blur"
          }
        ],
      },
      Configuration:{},
      dats: [], //页面
      mParams: "{}",
      count: 0,
    };
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getalljurisdiction();
    //获取所有权限信息
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 选取到的页面id
    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach(item => {
        if(item.id!==0){
        arr.push(item.id);
        }
      });
      this.indexlist = arr;
    },
    // 获取管理员的所有权限
    getRoleinfo(row){
      var vm=this;
      if(row.menuIdList){
        vm.indexlist=row.menuIdList;
      }else{
        vm.indexlist=[];
      }
      vm.editForm.adminId=row.adminId;
      vm.accessConfiguration=true;
    },
    //保存权限
    submitConfiguration(){
      let tData = {
        action: "backstage/admin/update/menu",
        headers: this.abdpConfig.getApiJson(),
        data: {
          adminId:this.editForm.adminId,
          menuIdList:this.indexlist,
        }
      };
      this.abdpAjax.http(tData).then(rsp => {
        if (rsp.data.code == 200) {
          this.count+=1;
          this.$message.success(rsp.data.message);
          this.closeDialog();
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    //获取所有权限
    getalljurisdiction() {
      let tData = {
        action: "backstage/backstage-menu/all/tree",
        headers: this.abdpConfig.getApiJson(),
        data: {}
      };
      this.abdpAjax.http(tData).then(rsp => {
        if (rsp.data.code == 200) {
          var resData=[
            {
              name:"全部",
              id: 0,
              children: rsp.data.data
            }
          ]
          this.dats =resData;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    // 隐藏弹出框
    closeDialog() {
      this.editForm= {
        name: "", //管理员名称
        account: "", //管理员账号
        password: "", //管理员密码
        adminId:"",
      };
      this.indexlist=[];
      this.editFormVisible = false;
      this.accessConfiguration=false;
      this.logining = false;
    },
    // 打开修改或者新增的弹框
    handleEdit(index, row) {
      this.title = index;
      if (index == 0) {
        //新增
        this.editFormVisible = true;
      } else {
        //修改
        this.editForm.name=row.name;
        this.editForm.account=row.account;
        this.editForm.password=row.password;
        this.editForm.adminId=row.adminId;
        this.editFormVisible = true;
      }
      

    },
    // 记录分页组件当前页面
    getMsgFormSon(data) {
      var mParams = {
        page: data,
      };
      this.mParams = JSON.stringify(mParams);
    },
    // 提交新增或修改的内容
    submitForm(formName) {
      var that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.logining = false;
          if (that.title == 0) {          
            var  tData = {
              action: "backstage/admin/save",
              headers: that.abdpConfig.getApiJson(),
              data: {
                name: that.editForm.name,
                account: that.editForm.account,
                password: that.editForm.password,
               }
            };
          }else {
            //修改
            var tData = {
              action: "backstage/admin/save",
              headers: that.abdpConfig.getApiJson(),
              data: {
                name: that.editForm.name,
                account: that.editForm.account,
                password: that.editForm.password,
                adminId: that.editForm.adminId,
              }
            };
          }

            that.abdpAjax.http(tData).then(rsp => {
              if (rsp.data.code == 200) {
                //提示
                that.$message({
                  showClose: true,
                  message: rsp.data.message,
                  type: "success"
                });
                that.closeDialog();
                that.count+=1;
              } else {
                that.$message.error(rsp.data.message);
              }
            });
          
        } else {
          that.logining = false;
          return false;
        }
      });
    },
    // 删除
    remove(adminId) {
      this.$confirm("是否要删除该角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let tData = {
            action: "backstage/admin/remove",
            // headers: this.abdpConfig.json,
            headers: this.abdpConfig.getApiJson(),
            data: {
              adminId: adminId
            }
          };
          this.abdpAjax.http(tData).then(rsp => {
            if (rsp.data.code == 200) {
              //提示
              this.$message({
                showClose: true,
                message: rsp.data.message,
                type: "success"
              });
              this.count+=1;
            } else {
              this.$message.error(rsp.data.message);
            }
            return true;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.el-dialog__body {
  padding: 10px 20px !important;
}
.userRole {
  width: 100%;
}
</style>
